<template>
  <div class="container">
    <div class="app-container">
      <!-- 表单 -->
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" style="width: 350px; margin: 20px 0 0 100px;">
        <!-- 姓名 -->
        <el-form-item label="姓名：" prop="username">
          <el-input v-model="formData.username" />
        </el-form-item>
        <!-- 工号 -->
        <el-form-item v-if="employeeId" label="工号：">
          <el-input v-model="formData.workNumber" disabled />
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号：" prop="mobile">
          <el-input v-model="formData.mobile" :disabled="!!employeeId" />
        </el-form-item>
        <!-- 部门 -->
        <el-form-item label="部门：" prop="departmentId">
          <el-cascader
            v-model="formData.departmentId"
            :options="departmentList"
            :props="{ expandTrigger: 'hover', label: 'name', value: 'id', emitPath: false }"
            separator="-"
            style="width: 100%"
            @blur.native.capture="$refs.formRef.validateField('departmentId')"
          />
        </el-form-item>
        <!-- 聘用形式 -->
        <el-form-item label="聘用形式：" prop="formOfEmployment">
          <!-- @blur.native.capture这个时间是为了手动触发表单校验，防止el-select组件的校验不触发 -->
          <el-select v-model="formData.formOfEmployment" style="width: 100%" @blur.native.capture="$refs.formRef.validateField('formOfEmployment')">
            <el-option :value="1" label="正式" />
            <el-option :value="2" label="非正式" />
          </el-select>
        </el-form-item>
        <!-- 入职时间-->
        <el-form-item label="入职时间：" prop="timeOfEntry">
          <el-date-picker
            v-model="formData.timeOfEntry"
            style="width: 100%"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <!-- 转正时间-->
        <el-form-item label="转正时间：" prop="correctionTime">
          <el-date-picker
            v-model="formData.correctionTime"
            style="width: 100%"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <!-- 员工头像-->
        <el-form-item label="员工头像：">
          <el-upload
            class="avatar-uploader"
            action
            :http-request="onUploadAvatar"
            :show-file-list="false"
            :before-upload="onBeforeUploadAvatar"
          >
            <img v-if="formData.staffPhoto" :src="formData.staffPhoto" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <!-- 保存和取消按钮 -->
        <el-form-item>
          <el-button type="primary" style="margin-right: 30px;" @click="onSaveEmployee">保存</el-button>
          <el-button @click="onCancelSaveEmployee">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getDepartmentListAPI } from '@/api/department'
import { getEmployeeDetailAPI, updateEmployeeAPI, addEmployeeAPI } from '@/api/employee'
import { transListToTreeData } from '@/utils'

import COS from 'cos-js-sdk-v5'

// 员工信息表单默认数据
const defaultFormData = {
  username: '', // 员工姓名
  workNumber: '', // 工号
  mobile: '', // 手机号
  departmentId: null, // 部门id
  formOfEmployment: null, // 聘用形式
  timeOfEntry: '', // 入职时间
  correctionTime: '', // 转正时间
  staffPhoto: '' // 员工头像
}

export default {
  name: 'EmployeeDetail',
  data() {
    return {
      formData: { ...defaultFormData }, // 员工信息表单数据
      // 员工信息表单校验规则
      formRules: {
        // 员工姓名
        username: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度必须为 1 到 4 个字符', trigger: 'blur' }
        ],
        // 手机号
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        // 工号
        workNumber: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        // 部门
        departmentId: [
          { required: true, message: '请选择部门', trigger: ['blur', 'change'] }
        ],
        // 聘用形式
        formOfEmployment: [
          { required: true, message: '请选择聘用形式', trigger: ['blur', 'change'] }
        ],
        // 入职时间
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
        // 转正时间
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value && this.formData.timeOfEntry) {
                if (new Date(value) < new Date(this.formData.timeOfEntry)) {
                  callback(new Error('转正时间不能早于入职时间'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ]
      },
      departmentList: [], // 部门列表
      pickerOptions: {
        // 禁止选择将来的日期
        disabledDate(time) {
          return time.getTime() > Date.now()
        }

      }
    }
  },
  computed: {
    // 获取路由参数（员工id）
    employeeId() {
      return this.$route.query.id
    }
  },
  created() {
    // 获取部门列表
    this.getDepartmentList()
    // 判断员工id是否存在
    if (this.employeeId) {
      // 存在，则修改页面标题为员工详情
      this.$route.meta.title = '员工详情'
      // 获取员工信息
      this.getEmployeeDetail()
    }
  },
  methods: {
    // 获取部门列表
    async getDepartmentList() {
      const list = await getDepartmentListAPI()
      // 将对象数组列表转化为树形列表结构
      this.departmentList = transListToTreeData(list, 0)
    },
    // 获取员工信息
    async getEmployeeDetail() {
      this.formData = await getEmployeeDetailAPI(this.employeeId)
    },
    // 上传员工头像之前
    onBeforeUploadAvatar(file) {
      // 上传的文件类型是否是图片格式
      const isImgType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      // 上传的文件大小是否小于5M
      const isLessThan2M = file.size / 1024 / 1024 < 5
      // 验证上传的文件类型
      if (!isImgType) {
        this.$message({ type: 'error', message: '上传头像图片只能是 JPG/PNG/GIF/BMP 格式!' })
      }
      // 验证上传的文件大小
      if (!isLessThan2M) {
        this.$message({ type: 'error', message: '上传图片大小不能超过 5MB!' })
      }
      return isImgType && isLessThan2M
    },
    // 上传员工头像
    onUploadAvatar(item) {
      // 创建COS实例
      const cos = new COS({
        SecretId: process.env.VUE_APP_COS_SecretId,
        SecretKey: process.env.VUE_APP_COS_SecretKey
      })
      // 上传文件到COS
      cos.putObject({
        Bucket: 'tigerchengxunyuan-1354501980', // 必须
        Region: 'ap-shanghai', // 存储桶所在地域，必须字段
        Key: item.file.name, // 必须
        StorageClass: 'MAZ_STANDARD',
        Body: item.file // 上传文件对象
      }, (err, data) => {
        if (err) {
          // 处理请求出错
          this.$message({ type: 'error', message: '图片上传失败!' })
        } else {
          // 处理请求成功
          if (data.statusCode === 200 && data.Location) {
            this.formData.staffPhoto = 'http://' + data.Location
          }
        }
      })
    },
    // 保存员工信息
    onSaveEmployee() {
      // 验证表单数据
      this.$refs.formRef.validate(async isOk => {
        if (isOk) {
          // 如果有员工id，则修改员工信息
          if (this.employeeId) {
            await updateEmployeeAPI(this.formData)
            this.$message({ type: 'success', message: '修改员工成功!' })
            // 跳转到员工列表页对应的页
            this.$router.push(`/employee?page=${this.$route.query.page}`)
          } else {
            // 如果没有员工id，则新增员工信息
            await addEmployeeAPI(this.formData)
            this.$message({ type: 'success', message: '新增员工成功!' })
            // 跳转员工列表最后一页，以显示新增数据
            this.$router.push(`/employee?page=${this.$route.query.last}`)
          }
        }
      })
    },
    // 取消保存员工信息
    onCancelSaveEmployee() {
      const page = this.$route.query.page
      if (page) {
        this.$router.push(`/employee?page=${page}`)
      } else {
        this.$router.push('/employee')
      }
    }
  }
}
</script>

<style>

</style>

<!-- 头像上传组件样式 -->
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
